let chessGame = (function () {
  let _config = {
    container: '',
    width: 500,
    border: 10
  }
  let chessApi = null
  let canvas = null
  let context2d = null
  // var site = 1
  var chess = {
    black: 1,
    white: 2
  }
  var qizi = []
  function _init (config) {
    console.log(config)
    _config.container = config.container
    canvas = document.getElementById(config.container)
    context2d = canvas.getContext('2d')
    chessApi = config.chessApi
  };
  function drawChess (x, y, color) {
    var lineHeight = (_config.width - 2 * _config.border) / 14
    context2d.beginPath()
    context2d.arc(_config.border + x * lineHeight, _config.border + y * lineHeight, lineHeight / 3, 0, 2 * Math.PI)// 绘制棋子
    var g = context2d.createRadialGradient(_config.border + x * lineHeight, _config.border + y * lineHeight, lineHeight / 3, _config.border + x * lineHeight, _config.border + y * lineHeight, 0)// 设置渐变
    if (color === chess.black) {
      g.addColorStop(0, '#0A0A0A')// 黑棋
      g.addColorStop(1, '#636766')
    } else {
      g.addColorStop(0, '#D1D1D1')// 白棋
      g.addColorStop(1, '#F9F9F9')
    }
    context2d.fillStyle = g
    context2d.fill()
    context2d.closePath()
  };

  var userInfo = null

  function _hasLogin () {
    if (userInfo) {
      return true
    } else {
      return false
    }
  }

  function _login (name) {
    if (!_hasLogin()) {
      let loginInfo = {
        command: 5,
        name: name
      }
      console.log(loginInfo)
      chessApi.send(JSON.stringify(loginInfo))
    }
  }
  var table = null
  function _hasTable () {
    if (table) {
      return true
    } else {
      return false
    }
  }
  function _createTable () {
    if (!_hasTable()) {
      let createTableInfo = {
        command: 7
      }
      chessApi.send(JSON.stringify(createTableInfo))
    }
  }
  function _joinTable (tableId) {
    if (!_hasTable()) {
      let joinTableInfo = {
        command: 11,
        tableId: tableId
      }
      chessApi.send(JSON.stringify(joinTableInfo))
    }
  }
  function _oneStep (x, y) {
    let joinTableInfo = {
      command: 13,
      x: x,
      y: y
    }
    chessApi.send(JSON.stringify(joinTableInfo))
  }
  /**
   * 游戏状态  0:准备就绪 1:进行中 2:结束
   */
  var gamestatus = null
  function _gamestatus () {
    return gamestatus
  }
  function _startGame () {
    if (gamestatus === 0 || gamestatus === 2) {
      let startInfo = {
        command: 10
      }
      chessApi.send(JSON.stringify(startInfo))
    } else {
      alert('还不能开始')
    }
  }
  function _resetChessBoard () {
    context2d.clearRect(0, 0, _config.width, _config.width)
    for (var i = 0; i < 15; i++) {
      qizi[i] = []
      for (var j = 0; j < 15; j++) {
        qizi[i][j] = 0
      }
    }
    _drawChessBoard()
    canvas.onclick = function (e) {
      if (gamestatus !== 1) {
        return
      }
      var lineHeight = (_config.width - 2 * _config.border) / 14
      console.log('每行宽度:' + lineHeight)

      var x = e.offsetX - _config.border// 相对于棋盘左上角的x坐标
      var y = e.offsetY - _config.border// 相对于棋盘左上角的y坐标
      console.log('点击:[' + x + ',' + y + ']')

      var qxx = Math.floor((x - (_config.border) + (lineHeight / 2)) / lineHeight)
      var qyy = Math.floor((y - (_config.border) + (lineHeight / 2)) / lineHeight)

      console.log('点击的棋子为:[' + qxx + ',' + qyy + ']')

      var qx = 0
      for (let i = 0; i < 15; i++) {
        if (x < (lineHeight * i + (lineHeight / 2)) && x > (lineHeight * i - (lineHeight / 2))) {
          qx = i
          break
        }
      }
      var qy = 0
      for (let i = 0; i < 15; i++) {
        if (y < (lineHeight * i + (lineHeight / 2)) && y > (lineHeight * i - (lineHeight / 2))) {
          qy = i
          break
        }
      }

      if (qizi[qx][qy] !== 0) {
        console.log('该位置已经有棋子了')
      } else {
        // drawChess(qx, qy, site)
        _oneStep(qx, qy)
        // qizi[qx][qy] = site
      }
    }
  }
  // function _onmessage (evt) {
  //   let result = JSON.parse(evt.data)
  //   console.log(result)
  //   if (result.command === 6) {
  //     userInfo = {
  //       id: result.id,
  //       name: result.name
  //     }
  //   } else if (result.command === 8) {
  //     if (result.success) {
  //       table = {
  //         id: result.tableId
  //       }
  //     }
  //   }
  // }
  function _drawChessBoard () {
    console.log('draw')
    // 棋盘线数量为15
    // var lineNum = 15
    let lineHeight = (_config.width - 2 * _config.border) / 14
    for (var i = 0; i < 15; i++) {
      // 先画竖线
      context2d.strokeStyle = '#D6D1D1'
      context2d.moveTo(_config.border + i * lineHeight, _config.border)
      context2d.lineTo(_config.border + i * lineHeight, _config.width - _config.border)
      context2d.stroke()
      // 画横线
      context2d.strokeStyle = '#D6D1D1'
      context2d.moveTo(_config.border, _config.border + i * lineHeight)
      context2d.lineTo(_config.width - _config.border, _config.border + i * lineHeight)
      context2d.stroke()
    }
  }
  return {
    init (config) {
      _init(config)
      for (var i = 0; i < 15; i++) {
        qizi[i] = []
        for (var j = 0; j < 15; j++) {
          qizi[i][j] = 0
        }
      }
      // chessApi.init({
      //   url: config.wsurl,
      //   onmessage: _onmessage
      // })
      // chessApi.onmessage = _onmessage
    },
    drawChessBoard: function () {
      _drawChessBoard()
    },
    login (name) {
      _login(name)
    },
    getUserInfo () {
      return userInfo
    },
    createTable () {
      return _createTable()
    },
    joinTable (tableId) {
      _joinTable(tableId)
    },
    getTable () {
      return table
    },
    startGame () {
      _startGame()
    },
    getGameStatus () {
      return _gamestatus()
    },
    setGameStatus (status) {
      gamestatus = status
    },
    setColor (color) {
      // site = color
    },
    drawChess (x, y, color) {
      drawChess(x, y, color)
      qizi[x][y] = color
    },
    resetChessBoard () {
      _resetChessBoard()
    }
  }
})()
export default chessGame
